<template>
  <el-container>
    <el-header
      class="header"
      height="30px"
    >
      <n-header :is-back="true"></n-header>
    </el-header>
    <el-main class="main">
      <n-search-bar
        :logoSize="10"
        :searchSize="10"
        :otherSize="-1"
        justify="space-between"
        :searchStyle="{height: '125px', backgroundColor: '#fff'}"
        :logoStyle="{fontSize: '100px'}"
      >
        <template #search>
          <search-bar></search-bar>
        </template>
      </n-search-bar>
      <div style="width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #f5f5f5;">
        <div style="width: 1000px; display: flex; justify-content: start; margin-top: 10px;">
          <el-breadcrumb separator-icon="ArrowRight">
            <el-breadcrumb-item>
              <span class="breadcrumb">订单中心</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span style="font-weight: 600;">订单: {{ orderDetail.orderDetailId }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <order-detail-info
          :orderDetailId="orderDetail.orderDetailId"
          :logisticsState="orderDetail.logisticsState"
        ></order-detail-info>
        <logistics-info
          :image="orderDetail.image"
          :logistics="orderDetail.logistics"
          :orderLogisticsDetails="orderLogisticsDetails"
        ></logistics-info>
      </div>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
import NUserInfoVue from "@/components/NUserInfo.vue";
import NHeaderVue from "@/components/NHeader.vue";
import NSearchBarVue from "@/components/NSearchBar.vue";
import SearchBarVue from "@/components/userInfo/SearchBar.vue";
import OrderDetailInfoVue from "@/components/orderDetail/OrderDetailInfo.vue";
import LogisticsInfoVue from "@/components/orderDetail/LogisticsInfo.vue";
import { selectOrderDetailById } from "@/api/orderDetail";
import { selectOrderLogisticsDetailsById } from "@/api/orderLogisticsDetails";

export default {
  components: {
    NUserInfo: NUserInfoVue,
    NHeader: NHeaderVue,
    NSearchBar: NSearchBarVue,
    SearchBar: SearchBarVue,
    OrderDetailInfo: OrderDetailInfoVue,
    LogisticsInfo: LogisticsInfoVue,
  },
  data() {
    return {
      orderDetail: {},
      orderLogisticsDetails: []
    };
  },
  methods: {
    doSelectOrderDetailById() {
      selectOrderDetailById(this.$route.query.id).then((res) => {
        this.orderDetail = res;
      });
    },
    doSelectOrderLogisticsDetailsById() {
      selectOrderLogisticsDetailsById(this.$route.query.id).then((res) => {
        this.orderLogisticsDetails = res
        console.log(res)
      });
    },
  },
  created() {
    this.doSelectOrderDetailById();
    this.doSelectOrderLogisticsDetailsById();
  },
};
</script>

<style scoped>
.header {
  background-color: #eae5e3;
}
.main {
  background-color: #fff;
  overflow: hidden;
  padding: 0;
  width: 100%;
}
.breadcrumb:hover {
  cursor: pointer;
  color: #3271ae;
}
</style>